<!DOCTYPE html>
<html>

	<head>
		<title>Unboxing</title>
		<meta charset="UTF-8">
		<style>
			html,
			body {
				padding: 0;
				margin: 0;
			}
			
			.main {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
		</style>

		<script>
			htconfig = {
				Style: {
					'edge.width': 1
				}
			};
		</script>
		<script src="../lib/core/ht.js"></script>
		<script src="../lib/plugin/ht-modeling.js"></script>
		<script src="../lib/plugin/ht-form.js"></script>
		<script>
			//          ht.Default.setImage('DieTexture', '');
			ht.Default.setImage('DieTexture', '../img/pic.png');

			function init() {
				dm = new ht.DataModel();
				graph3dView = new ht.graph3d.Graph3dView(dm);

				// 禁止平移
				graph3dView.isMovable = function(data) {
					return false;
				};

				// 单击事件
				graph3dView.addInteractorListener(function(e) {
					if(e.kind === 'clickData') {
						console.log(e.data + '被单击');
						var id = e.data._id;
						var selectedMap = graph3dView._dataModel._selectionModel._map;
						var selectedEle = [];
						for(var key in selectedMap) {
							selectedEle.push(selectedMap[key]._id);
						}
						console.log(selectedEle);
					}
				});

				view = graph3dView.getView();
				view.className = 'main';
				document.body.appendChild(view);
				window.addEventListener('resize', function(e) {
					graph3dView.iv();
				}, false);

				graph3dView.setEye(0, 700, 1000);
				graph3dView.setCenter(0, 150, 0);
				graph3dView.setGridVisible(true);

				node1 = createNode(-300, Math.PI / 6, false, false);
				node2 = createNode(300, 0, true, false);

				currentNode = null;
				sm = dm.sm();
				sm.ms(function(e) {
					currentNode = sm.ld();
				});

				sm.ss(node1);

				graph3dView.getWireframe = function(data) {
					return null;
				};
			}

			function createNode(x, angle, short, toggleable) {
				var node = new ht.CSGBox();
				dm.add(node);
				node.s3(300, 300, 300);
				node.p3(x, 150, 0);
				node.s({
					'all.image': 'DieTexture',
					'all.color': 'red',
					'back.uv': [0.25, 0.75, 0.25, 1, 0.5, 1, 0.5, 0.75],
					'front.uv': [0.25, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25],
					'top.uv': [0.25, 0.5, 0.25, 0.75, 0.5, 0.75, 0.5, 0.5],
					'bottom.uv': [0.25, 0, 0.25, 0.25, 0.5, 0.25, 0.5, 0],
					'left.uv': [0, 0.75, 0, 1, 0.25, 1, 0.25, 0.75],
					'right.uv': [0.5, 0.75, 0.5, 1, 0.75, 1, 0.75, 0.75],
					'left.angle': angle,
					'right.angle': angle,
					'top.angle': angle,
					'bottom.angle': angle,
					'front.angle': angle,
					'back.angle': angle,

					'left.toggleable': toggleable,
					'right.toggleable': toggleable,
					'top.toggleable': toggleable,
					'bottom.toggleable': toggleable,
					'front.toggleable': toggleable,
					'back.toggleable': toggleable,

					'left.axis': 'bottom',
					'right.axis': 'bottom',
					'top.axis': 'top',
					'bottom.axis': 'bottom',
					'front.axis': 'bottom',
					'back.axis': 'bottom',
					'wf.visible': true,
					'wf.short': short,
					'wf.width': 3
				});
				node.a({
					'frame.size': 1,
					'frame.rotation': 0
				});
				return node;
			}
		</script>
	</head>

	<body onload="init();"></body>

</html>